<script setup>
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import {useRouter} from 'vue-router'
import {UPDATE_AVATAR_ROUTE} from "@/router/routes/setting/UpdateAvatar.js";
import {UPDATE_AVATAR_BG_ROUTE} from "@/router/routes/setting/UpdateAvatarBg.js";
import {UPDATE_USERNAME_ROUTE} from "@/router/routes/setting/UpdateUsername.js";
import {UPDATE_PWD_ROUTE} from "@/router/routes/setting/UpdatePwd.js";
import {showConfirmDialog} from "vant";
import 'vant/es/dialog/style'
import {HOME_ROUTE} from "@/router/routes/home/home.js";
import {logoutAPI} from "@/api/logout.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import {UPDATE_USER_INFO_ROUTE} from "@/router/routes/setting/UpdateUserInfo.js";
import useOrderStore from "@/store/modules/OrderStore.js";

const router = useRouter()

const goUpdateAvatar = () => {
  router.push({name: UPDATE_AVATAR_ROUTE})
}
const goUpdateAvatarBg = () => {
  router.push({name: UPDATE_AVATAR_BG_ROUTE})
}
const goUpdateUsername = () => {
  router.push({name: UPDATE_USERNAME_ROUTE})
}

const goUpdatePwd = () => {
  router.push({name: UPDATE_PWD_ROUTE})
}

const goUpdateUserInfo = () => {
  router.push({name: UPDATE_USER_INFO_ROUTE})
}

const logout = () => {
  showConfirmDialog({
    message: '是否确认退出登录'
  }).then(async () => {
    // on confirm
    const res = await logoutAPI()
    if (res) {
      useAccountStore().clear()
      useOrderStore().clear()
      router.replace({name: HOME_ROUTE})
    }
  }).catch(() => {
    // on cancel
  });
}
</script>

<template>
  <div class="setting">
    <GoBackAndSearchNav :title="'设置'" :placeholder="true"></GoBackAndSearchNav>
    <van-cell title="更换头像" is-link @click="goUpdateAvatar">
      <template #icon>
        <span class="iconfont icon-yonghu1 mr-2"></span>
      </template>
    </van-cell>
    <van-cell title="更换头像背景图" is-link @click="goUpdateAvatarBg">
      <template #icon>
        <span class="iconfont icon-shangchuantupian2 mr-2"></span>
      </template>
    </van-cell>
    <van-cell title="修改用户名" is-link @click="goUpdateUsername">
      <template #icon>
        <span class="iconfont icon-jurassic_user mr-2"></span>
      </template>
    </van-cell>
    <van-cell title="修改密码" is-link @click="goUpdatePwd">
      <template #icon>
        <span class="iconfont icon-yanzhengma2 mr-2"></span>
      </template>
    </van-cell>
    <!--<van-cell title="更换邮箱" is-link>-->
    <!--  <template #icon>-->
    <!--    <span class="iconfont icon-youjian mr-2"></span>-->
    <!--  </template>-->
    <!--</van-cell>-->
    <van-cell title="修改用户信息" is-link @click="goUpdateUserInfo">
      <template #icon>
        <span class="iconfont icon-yonghuxinxi mr-2"></span>
      </template>
    </van-cell>
    <div class="mt-2 p-2">
      <van-button block
                  round
                  @click="logout"
                  color="linear-gradient(to right, #ff6034, #ee0a24)">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>